<template>
  <div class="w-full">
    <VueDraggable v-model="list" :animation="150" ghostClass="ghost"
      :group="{ name: 'people', pull: 'clone', put: false }" :clone="clone" :sort="false"
      class="w-full grid grid-cols-24 gap-2 p-4 w-300px bg-gray-500/5 rounded">
      <span v-for="item in list" :key="item.id"
        class="col-span-[12] cursor-move h-50px bg-white rounded p-3 flex items-center justify-center">
        {{ item.label }}
      </span>
    </VueDraggable>
  </div>
</template>
<script setup lang='ts'>
import { VueDraggable } from 'vue-draggable-plus'
import { uniqueId } from './tool/index'

interface propMsg {
  list: (Record<'label', string> & Record<'id', number>)[]
}
// const emit = defineEmits([])
const props = withDefaults(defineProps<propMsg>(), {
  list: () => [],
})
const { list } = toRefs(props)

function clone(element: Record<'label' | 'id', string>) {
  return {
    ...element,
    name: `${element.label}-clone`,
    id: uniqueId(),
    layout: {
      span: 12,
    },
  }
}
</script>
<style scoped lang='scss'>
</style>